<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>欢迎来到guo的博客!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta property="og:type" content="website">
<meta property="og:title" content="欢迎来到guo的博客!">
<meta property="og:url" content="http://shangguan-lingfeng.gitee.io/blog1/page/4/index.html">
<meta property="og:site_name" content="欢迎来到guo的博客!">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Jerry">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/blog1/atom.xml" title="欢迎来到guo的博客!" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/blog1/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/blog1/css/style.css">

  
    
<link rel="stylesheet" href="/blog1/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/blog1/" id="logo">欢迎来到guo的博客!</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/blog1/">Home</a>
        
          <a class="main-nav-link" href="/blog1/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/blog1/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Suche"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://shangguan-lingfeng.gitee.io/blog1"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="post-redis发布者订阅者" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/02/01/redis%E5%8F%91%E5%B8%83%E8%80%85%E8%AE%A2%E9%98%85%E8%80%85/" class="article-date">
  <time class="dt-published" datetime="2021-02-01T07:24:03.010Z" itemprop="datePublished">2021-02-01</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/02/01/redis%E5%8F%91%E5%B8%83%E8%80%85%E8%AE%A2%E9%98%85%E8%80%85/">redis发布者订阅者</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="什么是redis发布者订阅者？"><a href="#什么是redis发布者订阅者？" class="headerlink" title="什么是redis发布者订阅者？"></a>什么是redis发布者订阅者？</h2><p>redis发布订阅(pub/sub)是一种消息通信模式，包含发送者(pub)来发送消息，与订阅者(sub)来接收消息。<br>订阅者可以订阅一个或若多个频道（channel），而发布者可以向指定的频道发送消息，<br>所有订阅此频道的订阅者都会收到此消息。像是我们在网络上对哪个博主的文章感兴趣就可以来订阅它，来获取它的<br>消息的推送，不感兴趣后可以取消订阅取消获取此博主的消息推送。你可以关注的博主有很多。</p>
<p>##常用订阅者模块命令<br>subscribe： 订阅一个或者多个频道<br>unsubscribe: 退订一个或者多个频道<br>publish: 向通道发送消息<br>psubscribe: 订阅给定模式相匹配的所有频道<br>punsubscribe: 退订 给定模式所有的频道，若未指定模式，退订所有频道</p>
<h2 id="实际演示Redis发布者订阅者"><a href="#实际演示Redis发布者订阅者" class="headerlink" title="实际演示Redis发布者订阅者"></a>实际演示Redis发布者订阅者</h2><p>首先我们需要开启两个Redis客户端充当发布者和订阅者,在第一个客户端创建一个订阅频道YouTube</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">redis 127.0.0.1:6379&gt; subscribe YouTube</span><br><span class="line">Reading messages... (press Ctrl-C to quit)</span><br><span class="line">1) &quot;subscribe&quot;</span><br><span class="line">2) &quot;YouTube&quot;</span><br><span class="line">3) (integer) 1</span><br></pre></td></tr></table></figure>
<p>继续创建发布者客户端在订阅者客户端创建的YouTube频道发布消息，使订阅者客户端能够收到消息。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">redis 127.0.0.1:6379&gt; publish YouTube &quot;发送的第一条消息&quot;</span><br><span class="line">(integer) 1     #客户端订阅数量</span><br></pre></td></tr></table></figure>
<p>订阅者的客户端会收到如下消息</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1) &quot;message&quot;    #表示接收到的消息</span><br><span class="line">2) &quot;YouTube&quot;    #创建的频道名</span><br><span class="line">3) &quot;发送的第一条消息&quot;   #接收到发布者发送的消息</span><br></pre></td></tr></table></figure>
<h2 id="redis发布订阅命令返回信息"><a href="#redis发布订阅命令返回信息" class="headerlink" title="redis发布订阅命令返回信息"></a>redis发布订阅命令返回信息</h2><p>订阅者客户端可能收到三种类型的回复。每种类型的回复都包含3个值，通常第一个值是消息的类型，根据消息类型的不同，第二、三个值的含义也不同。以下是消息类型可能的取值：<br><strong>subscribe</strong>：表示订阅成功。第二个值是订阅成功的频道名称，第三个值是当前客户端订阅的频道数量。<br><strong>message</strong>：表示接收到的消息。第二个值表示产生 消息的频道名称，第三个值是消息的内容。<br><strong>unsubscribe</strong>：表示成功取消订阅成功。第二个值是取消订阅成功的频道名称，第三个值是当前客户端订阅的频道数量，当此值为0时客户端会退出订阅状态。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/02/01/redis%E5%8F%91%E5%B8%83%E8%80%85%E8%AE%A2%E9%98%85%E8%80%85/" data-id="cknublgbv000uv8uhdfdk880h" data-title="redis发布者订阅者" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/redis/" rel="tag">redis</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-axios封装" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/31/axios%E5%B0%81%E8%A3%85/" class="article-date">
  <time class="dt-published" datetime="2021-01-31T06:57:04.348Z" itemprop="datePublished">2021-01-31</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/31/axios%E5%B0%81%E8%A3%85/">axios封装</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="vue安装axios"><a href="#vue安装axios" class="headerlink" title="vue安装axios"></a>vue安装axios</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install axios --save</span><br></pre></td></tr></table></figure>
<h2 id="单独在src下创建文件夹存放封装的axios"><a href="#单独在src下创建文件夹存放封装的axios" class="headerlink" title="单独在src下创建文件夹存放封装的axios"></a>单独在src下创建文件夹存放封装的axios</h2><p>我们在创建的src下的http文件夹，里面有两个js文件，是index.js和api.js文件，<br>分别用来axios拦截器和封装axios请求方式。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">axios.defaults.baseURL = <span class="string">&#x27;http://127.0.0.1:8000/&#x27;</span>   <span class="comment">//封装axios的URL基础路由</span></span><br><span class="line">axios.defaults.timeout = <span class="number">10000</span>  <span class="comment">//超时请求时间，单位为毫秒</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 请求拦截器(在请求前会自动去做的操作)，如果登陆了，那么自动带token发送</span></span><br><span class="line">axios.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> token = <span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;token&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span> (token) &#123;</span><br><span class="line">        config.headers.common[<span class="string">&#x27;Authorization&#x27;</span>] = <span class="string">&quot;JWT &quot;</span> + token <span class="comment">// 头部设置</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">&#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应拦截器(在响应时自动会做的操作)，比如状态码返回为401时，要进入login界面</span></span><br><span class="line">axios.interceptors.response.use(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 200</span></span><br><span class="line">    <span class="keyword">return</span> response;</span><br><span class="line">&#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> error.response</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出封装get请求方式</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">get</span>(<span class="params">url, params, headers</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        axios.get(url, &#123;params, headers&#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">            resolve(res)</span><br><span class="line">        &#125;).catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">            reject(err)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出封装post请求方式</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">post</span>(<span class="params">url, params, headers</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        axios.post(url, params, headers).then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">            resolve(res)</span><br><span class="line">        &#125;).catch(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// debugger</span></span><br><span class="line">            reject(err)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出封装put请求方式</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">put</span>(<span class="params">url, params, headers</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        axios.put(url, params, headers).then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">            resolve(res)</span><br><span class="line">        &#125;).catch(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// debugger</span></span><br><span class="line">            reject(err)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出封装delete请求方式</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">del</span>(<span class="params">url, params, headers</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        axios.delete(url, &#123;<span class="attr">data</span>: params, headers&#125;).then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">            resolve(res)</span><br><span class="line">        &#125;).catch(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// debugger</span></span><br><span class="line">            reject(err)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出axios</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> axios</span><br><span class="line"><span class="comment">//也可以这么导出axios</span></span><br><span class="line"><span class="keyword">export</span> &#123;axios&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="api-js文件导入index-js文件封装的请求方式"><a href="#api-js文件导入index-js文件封装的请求方式" class="headerlink" title="api.js文件导入index.js文件封装的请求方式"></a>api.js文件导入index.js文件封装的请求方式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;post, get, put , del&#125; <span class="keyword">from</span> <span class="string">&#x27;./index&#x27;</span>    <span class="comment">//导入请求方式</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 注册接口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> Register = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> post(</span><br><span class="line">        <span class="string">&#x27;register/&#x27;</span>,</span><br><span class="line">        data</span><br><span class="line">    )&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 登陆接口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> Login = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> post(</span><br><span class="line">        <span class="string">&#x27;login/&#x27;</span>,</span><br><span class="line">        data,</span><br><span class="line">    )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="在vue视图中调用封装请求方式"><a href="#在vue视图中调用封装请求方式" class="headerlink" title="在vue视图中调用封装请求方式"></a>在vue视图中调用封装请求方式</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;username&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;用户名&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;password&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;密码&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;phone&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;手机号&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;email&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;邮箱&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Register&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Login&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Register, Login&#125; <span class="keyword">from</span> <span class="string">&quot;@/http/api&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">            <span class="string">&#x27;username&#x27;</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;password&#x27;</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;phone&#x27;</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;email&#x27;</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        <span class="function"><span class="title">register</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            Register(&#123;</span><br><span class="line">                <span class="string">&#x27;phone&#x27;</span>: <span class="built_in">this</span>.phone,</span><br><span class="line">                <span class="string">&#x27;password&#x27;</span>: <span class="built_in">this</span>.password,</span><br><span class="line">                <span class="string">&#x27;username&#x27;</span>: <span class="built_in">this</span>.username,</span><br><span class="line">                <span class="string">&#x27;email&#x27;</span>: <span class="built_in">this</span>.email,</span><br><span class="line">            &#125;).then(<span class="function"><span class="params">resp</span>=&gt;</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(resp.code==<span class="string">&#x27;10001&#x27;</span>)&#123;</span><br><span class="line">                    alert(resp.data.msg)</span><br><span class="line">                    <span class="built_in">this</span>.error = &#123;&#125;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="built_in">this</span>.error = resp.data</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="title">login</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            Login(&#123;</span><br><span class="line">                <span class="string">&#x27;username&#x27;</span>: <span class="built_in">this</span>.username,</span><br><span class="line">                <span class="string">&#x27;password&#x27;</span>: <span class="built_in">this</span>.password</span><br><span class="line">            &#125;).then(<span class="function"><span class="params">resp</span>=&gt;</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(resp.code==<span class="string">&#x27;10001&#x27;</span>)&#123;</span><br><span class="line">                    alert(<span class="string">&#x27;登录成功&#x27;</span>)</span><br><span class="line">                    <span class="built_in">localStorage</span>.setItem(<span class="string">&#x27;token&#x27;</span>, resp.data.token)</span><br><span class="line">                    <span class="built_in">localStorage</span>.setItem(<span class="string">&#x27;userId&#x27;</span>, resp.data.user_id)</span><br><span class="line">                    <span class="built_in">localStorage</span>.setItem(<span class="string">&#x27;username&#x27;</span>, resp.data.username)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/31/axios%E5%B0%81%E8%A3%85/" data-id="cknublgbh000av8uh4nu6bow4" data-title="axios封装" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/vue/" rel="tag">vue</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-celery异步框架" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/30/celery%E5%BC%82%E6%AD%A5%E6%A1%86%E6%9E%B6/" class="article-date">
  <time class="dt-published" datetime="2021-01-30T06:57:43.823Z" itemprop="datePublished">2021-01-30</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/30/celery%E5%BC%82%E6%AD%A5%E6%A1%86%E6%9E%B6/">celery异步框架</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="什么是celery"><a href="#什么是celery" class="headerlink" title="什么是celery"></a>什么是celery</h2><p>Celery是一个简单、灵活且可靠的，处理大量消息的分布式系统，并且提供维护这样一个系统的必需工具。简单来说就是可以用于维护服务。<br>并且Celery支持使用任务队列的方式在分布的机器、进程、线程上执行任务调度,可以不依赖任何服务器，通过自身命令，启动服务。<br>celery服务可以为其它项目服务提供异步解决任务需求。</p>
<h3 id="消息中间键"><a href="#消息中间键" class="headerlink" title="消息中间键"></a>消息中间键</h3><p>Celery本身不提供消息服务，但是可以方便的和第三方提供的消息中间件集成。包括，RabbitMQ, Redis等。</p>
<h2 id="celery的组成"><a href="#celery的组成" class="headerlink" title="celery的组成"></a>celery的组成</h2><p>Celery的结构(架构)由三部分组成，<strong>消息中间件（message broker）</strong>、<strong>任务执行单元（worker）</strong>和<strong>任务执行结果存储（task result store）</strong><br>三部分组成。<br><img src="http://www.west999.com/info/upload/20190724/npg0z0p0la2.png" alt="celery架构图"></p>
<h2 id="基本安装"><a href="#基本安装" class="headerlink" title="基本安装"></a>基本安装</h2><p>要想使用celery，首先要安装celery，要在django中使用还要有django-celery组件，还有需要存储数据的容器Redis</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">pip install celery</span><br><span class="line">pip install django-celery=5.0.5</span><br><span class="line">pip install django-redis=4.10.0</span><br><span class="line">pip install redis==2.10.6</span><br><span class="line">pip install flower #可视化平台</span><br></pre></td></tr></table></figure>
<h3 id="在settings中的基本配置"><a href="#在settings中的基本配置" class="headerlink" title="在settings中的基本配置"></a>在settings中的基本配置</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># celery配置</span></span><br><span class="line"><span class="keyword">import</span> djcelery  <span class="comment"># 导入django-celery模块</span></span><br><span class="line">djcelery.setup_loader()  <span class="comment"># 加载模块</span></span><br><span class="line">BROKER_URL = <span class="string">&#x27;redis://127.0.0.1:6379/1&#x27;</span>  <span class="comment"># 任务容器地址，Redis数据库地址</span></span><br><span class="line">CELERY_IMPORTS = (<span class="string">&#x27;CeleryTask.tasks&#x27;</span>)  <span class="comment"># 具体的任务文件</span></span><br><span class="line">CELERY_TIMEZONE = <span class="string">&#x27;Asia/Shanghai&#x27;</span>  <span class="comment"># celery时区</span></span><br><span class="line">CELERYBEAT_SCHEDULER = <span class="string">&#x27;djcelery.schedulers.DatabaseScheduler&#x27;</span>  <span class="comment"># celery处理器</span></span><br></pre></td></tr></table></figure>
<p>然后需要在主目录下创建一个celery.py文件，编写控制文件</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> __future__ <span class="keyword">import</span> absolute_import, unicode_literals</span><br><span class="line"><span class="keyword">import</span> os</span><br><span class="line"><span class="keyword">from</span> celery <span class="keyword">import</span> Celery</span><br><span class="line"><span class="keyword">from</span> django.conf <span class="keyword">import</span> settings</span><br><span class="line"></span><br><span class="line"><span class="comment"># 设置celery执行的环境变量，执行django项目的配置文件</span></span><br><span class="line">os.environ.setdefault(<span class="string">&quot;DJANGO_SETTINGS_MODULE&quot;</span>,<span class="string">&quot;CeleryTask.settings&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 创建celery应用</span></span><br><span class="line">app = Celery(<span class="string">&#x27;celely_task&#x27;</span>)  <span class="comment"># celery应用的名称</span></span><br><span class="line">app.config_from_object(<span class="string">&#x27;django.conf:settings&#x27;</span>)  <span class="comment"># 加载的配置文件</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果在工程的应用中创建了tasks.py模块，那么Celery应用就会自动去检索创建的任务。比如你添加了一个任#务，在django中会实时地检索出来。(检索创建任务)</span></span><br><span class="line">app.autodiscover_tasks(<span class="keyword">lambda</span>: settings.INSTALLED_APPS)</span><br></pre></td></tr></table></figure>
<p>接下来需要自己创建一个app来编写任务文件</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python manage.py startapp celeryTaskapp</span><br></pre></td></tr></table></figure>
<p>在app中新建一个tasks.py文件。注意！文件名必须为tasks.py</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> __future__ <span class="keyword">import</span> absolute_import</span><br><span class="line"><span class="keyword">import</span> requests</span><br><span class="line"><span class="keyword">import</span> json</span><br><span class="line"><span class="keyword">from</span> DjangoShop.celery <span class="keyword">import</span> app  <span class="comment"># 在安装celery框架成功后，django新生成的模块</span></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.task </span><span class="comment"># 将taskExample转换为一个任务来执行</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">taskExample</span>():</span></span><br><span class="line">    print(<span class="string">&quot;发送邮件成功！&quot;</span>)</span><br></pre></td></tr></table></figure>
<p>执行命令迁移数据库</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">python manage.py makemigrations</span><br><span class="line">python manage.py migrate</span><br></pre></td></tr></table></figure>
<h3 id="celery异步服务启动"><a href="#celery异步服务启动" class="headerlink" title="celery异步服务启动"></a>celery异步服务启动</h3><p>在完成celery启动之前，要先确保Redis处于开启状态</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis-server.exe redis.windows.conf</span><br></pre></td></tr></table></figure>
<p>再接着启动celery worker服务</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python manage.py celery worker --loglevel=info</span><br></pre></td></tr></table></figure>
<p>使用delay函数触发celery任务</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 触发celery任务的视图</span></span><br><span class="line"><span class="keyword">from</span> celeryTaskapp.tasks <span class="keyword">import</span> add</span><br><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> JsonResponse</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">get_add</span>(<span class="params">request</span>):</span></span><br><span class="line">    add.delay(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line">    <span class="keyword">return</span> JsonResponse(&#123;<span class="string">&quot;code&quot;</span>:<span class="number">200</span>&#125;)</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/30/celery%E5%BC%82%E6%AD%A5%E6%A1%86%E6%9E%B6/" data-id="cknublgbj000ev8uhf0pf74as" data-title="celery异步框架" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/python/" rel="tag">python</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-支付宝第三方支付" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/29/%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/" class="article-date">
  <time class="dt-published" datetime="2021-01-29T08:50:35.263Z" itemprop="datePublished">2021-01-29</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/29/%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/">支付宝第三方支付</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h3 id="支付宝开放平台"><a href="#支付宝开放平台" class="headerlink" title="支付宝开放平台"></a>支付宝开放平台</h3><p>支付宝开发平台登录：<a target="_blank" rel="noopener" href="https://open.alipay.com/platform/home.htm">https://open.alipay.com/platform/home.htm</a></p>
<p>进入控制台点击研发服务进入沙箱<br><img src="https://img-blog.csdnimg.cn/20181121162506796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODgxOTg4OQ==,size_16,color_FFFFFF,t_70" alt="控制台"></p>
<p>创建你的应用，然后进入沙箱开发环境<br><img src="https://img-blog.csdnimg.cn/20181121162800807.png" alt="沙箱开发环境"></p>
<p>再选择将支付宝的公钥内容复制到alipay_public_key.pem文件中</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">-----BEGIN PUBLIC KEY-----</span><br><span class="line">此处是公钥内容</span><br><span class="line">-----END PUBLIC KEY-----</span><br></pre></td></tr></table></figure>
<p>再选择将支付宝的私钥内容复制到alipay_private_key.pem文件中</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">-----BEGIN PRIVATE KEY-----</span><br><span class="line">此处是私钥内容</span><br><span class="line">-----END PRIVATE KEY-----</span><br></pre></td></tr></table></figure>
<h3 id="使用支付宝支付"><a href="#使用支付宝支付" class="headerlink" title="使用支付宝支付"></a>使用支付宝支付</h3><p>首先需要安装支付宝所需要的Alipay-SDK</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install python-alipay-sdk --upgrade</span><br></pre></td></tr></table></figure>
<p>我们需要在settings文件中所配置的信息</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">ALIPAY_APPID = <span class="string">&quot;&quot;</span>   <span class="comment"># 自己沙箱的APPID</span></span><br><span class="line">ALIPAY_URL = <span class="string">&quot;https://openapi.alipaydev.com/gateway.do&quot;</span>     <span class="comment">#支付宝网关</span></span><br><span class="line">ALIPAY_DEBUG = <span class="literal">True</span>     <span class="comment">#支付测试DEBUG</span></span><br><span class="line">APP_PRIVATE_KEY_PATH = os.path.join(BASE_DIR, <span class="string">&#x27;alipay/app_private_key.pem&#x27;</span>)     <span class="comment"># 私钥路径</span></span><br><span class="line">ALIPAY_PUBLIC_KEY_PATH = os.path.join(BASE_DIR, <span class="string">&#x27;alipay/alipay_public_key&#x27;</span>)     <span class="comment"># 公钥路径</span></span><br></pre></td></tr></table></figure>
<p>主路由配置</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">urlpatterns = [</span><br><span class="line">    url(<span class="string">r&#x27;^alipay/&#x27;</span>,include(<span class="string">&#x27;alipay.urls&#x27;</span>)),</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>支付路由配置</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">urlpatterns = [</span><br><span class="line">    //路由配置</span><br><span class="line">    url(<span class="string">r&#x27;^orders/(?P&lt;order_id&gt;\d+)/$&#x27;</span>,AlipayView.as_view()),</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>因为视图的执行首先是从项目的url寻找路径，然后再连接到应用pay的url里面，<br>当接受到前端的请求时候，便会执行相对应的视图功能函数。</p>
<hr>
<p>然后需要导出你的公钥和私钥所在文件</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> .alipay <span class="keyword">import</span> alipay_public_key.pem,alipay_private_key.pem</span><br></pre></td></tr></table></figure>
<h3 id="创建支付宝对象"><a href="#创建支付宝对象" class="headerlink" title="创建支付宝对象"></a>创建支付宝对象</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">app_private_key_string = <span class="built_in">open</span>(settings.APP_PRIVATE_KEY_PATH).read()  <span class="comment">#app的私匙</span></span><br><span class="line">alipay_public_key_string = <span class="built_in">open</span>(settings.ALIPAY_PUBLIC_KEY_PATH).read() <span class="comment">#app的公匙</span></span><br><span class="line"></span><br><span class="line">alipay = AliPay(</span><br><span class="line">    appid=settings.ALIPAY_APPID,    <span class="comment">#自己的APPID</span></span><br><span class="line">    app_notify_url=<span class="literal">None</span>,  <span class="comment"># 默认回调地址</span></span><br><span class="line">    app_private_key_string=app_private_key_string,  <span class="comment"># 自己的私钥</span></span><br><span class="line">    alipay_public_key_string=alipay_public_key_string,  <span class="comment"># 支付宝的公钥，验证支付宝回传消息使用，不是你自己的应用公钥</span></span><br><span class="line">    sign_type=<span class="string">&quot;RSA2&quot;</span>,</span><br><span class="line">    debug = settings.ALIPAY_DEBUG  <span class="comment"># 默认False</span></span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">subject = <span class="string">&quot;生成我的订单&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 需要跳转到支付宝支付网关：https://openapi.alipay.com/gateway.do? + order_string</span></span><br><span class="line">order_string = alipay.api_alipay_trade_page_pay(</span><br><span class="line">    out_trade_no=order_id,  <span class="comment">#订单号</span></span><br><span class="line">    total_amount=<span class="built_in">str</span>(order.total_amount), <span class="comment">#总金额</span></span><br><span class="line">    subject=subject,    <span class="comment">#自己的订单</span></span><br><span class="line">    return_url=<span class="string">&quot;http://127.0.0.1:8080/#/alipay_success&quot;</span>,</span><br><span class="line">    notify_url=<span class="literal">None</span></span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 5. 拼接url,并且返回</span></span><br><span class="line">url = settings.ALIPAY_URL + <span class="string">&#x27;?&#x27;</span> + order_string</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> Response(&#123;<span class="string">&#x27;url&#x27;</span>:url&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="保存支付结果"><a href="#保存支付结果" class="headerlink" title="保存支付结果"></a>保存支付结果</h3><p>用户支付成功后，支付宝会将用户重定向到支付成功页面，并携带支付结果数据。<br>这时候我们需要更新订单的状态和其它支付信息</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">put</span>(<span class="params">self,request</span>):</span></span><br><span class="line">   <span class="comment"># 3.验证成功之后,可以从data中获取支付宝的订单id和我们的订单id</span></span><br><span class="line">   <span class="comment"># 支付宝的交易id</span></span><br><span class="line">   trade_id = request.data.get(<span class="string">&#x27;trade_no&#x27;</span>)</span><br><span class="line">   <span class="comment"># 我的订单id</span></span><br><span class="line">   out_trade_no = request.data.get(<span class="string">&#x27;out_trade_no&#x27;</span>)</span><br><span class="line">   <span class="comment">#1. 把支付宝的订单id和 我们的订单id存到数据库中</span></span><br><span class="line">   alipay.objects.create(</span><br><span class="line">      order_id=out_trade_no,</span><br><span class="line">       trade_id=trade_id</span><br><span class="line">   )</span><br><span class="line">   <span class="comment"># 2. 更新订单的状态</span></span><br><span class="line">   Order.objects.<span class="built_in">filter</span>(order_id=out_trade_no).update(status=<span class="number">2</span>)    <span class="comment">#1表示未支付，2表示已支付</span></span><br><span class="line">   <span class="comment">#3. 返回 支付宝的订单id</span></span><br><span class="line">   <span class="keyword">return</span> Response(&#123;<span class="string">&#x27;trade_id&#x27;</span>:trade_id&#125;)</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/29/%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/" data-id="cknublgc20017v8uhhq6g7f6e" data-title="支付宝第三方支付" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/%E5%85%B3%E4%BA%8E%E7%AC%AC%E4%B8%89%E6%96%B9/" rel="tag">关于第三方</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-微博第三方登录" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/28/%E5%BE%AE%E5%8D%9A%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%BD%95/" class="article-date">
  <time class="dt-published" datetime="2021-01-28T04:27:14.000Z" itemprop="datePublished">2021-01-28</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/28/%E5%BE%AE%E5%8D%9A%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%BD%95/">微博第三方登录</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h3 id="微博开发平台"><a href="#微博开发平台" class="headerlink" title="微博开发平台"></a>微博开发平台</h3><p>我们想要实现微博第三方登录首先你要注册微博的账号，首先<strong>登录微博开发平台</strong><br><img src="https://img-blog.csdnimg.cn/20201009112644895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="微博开发平台页面"></p>
<p><strong>点击立即接入</strong><br><img src="https://img-blog.csdnimg.cn/2020100911264384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="网站接入"></p>
<p><strong>创建自己的应用</strong><br><img src="https://img-blog.csdnimg.cn/20201009112639200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="创建应用"></p>
<p>应用的APP Key，APP Secret是第三方登录需要在python中settings里配置的<br><img src="https://img-blog.csdnimg.cn/20201009112642296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="应用基本信息"></p>
<p><strong>设置回调地址</strong><br><img src="https://img-blog.csdnimg.cn/20201009112639701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="应用高级信息"></p>
<p><img src="https://img-blog.csdnimg.cn/20201009112642322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="接口文档"></p>
<h2 id=""><a href="#" class="headerlink" title=""></a><img src="https://img-blog.csdnimg.cn/20201009112640402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODcxNDg0Mw==,size_16,color_FFFFFF,t_70#pic_center" alt="OAuth2.0授权认证"></h2><table>
<thead>
<tr>
<th align="left">接口</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">OAuth2/authorize</td>
<td align="left">请求用户授权Token</td>
</tr>
<tr>
<td align="left">OAuth2/access_token</td>
<td align="left">获取授权过的Access Token，UID</td>
</tr>
</tbody></table>
<hr>
<p>微博开发平台网址：<a target="_blank" rel="noopener" href="https://open.weibo.com/">https://open.weibo.com</a></p>
<h3 id="settings进行微博第三方登录必要配置"><a href="#settings进行微博第三方登录必要配置" class="headerlink" title="settings进行微博第三方登录必要配置"></a>settings进行微博第三方登录必要配置</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Weibo_App_Key &#x3D; &#39;&#39;  # 自己的微博App Key</span><br><span class="line">Weibo_App_SECRET &#x3D; &#39;&#39;   # 自己的微博App Secret</span><br><span class="line">Weibo_REDIRECT_URL &#x3D; &#39;http:&#x2F;&#x2F;127.0.0.1:8080&#x2F;Weibo_login&#x2F;&#39;  # 设置回调地址(登录成功后跳转页面)</span><br></pre></td></tr></table></figure>
<h3 id="后端编写微博登录接口"><a href="#后端编写微博登录接口" class="headerlink" title="后端编写微博登录接口"></a>后端编写微博登录接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 导入.settings中的配置</span></span><br><span class="line"><span class="keyword">from</span> .settings <span class="keyword">import</span> SECRET_KEY, Weibo_App_Key, Weibo_REDIRECT_URL, Weibo_App_SECRET</span><br><span class="line"><span class="comment"># 微博登录地址</span></span><br><span class="line">WEIBO_URL = <span class="string">&#x27;https://api.weibo.com/oauth2/authorize?client_id=%s&amp;redirect_uri=%s&#x27;</span></span><br><span class="line"><span class="comment"># 生成前端跳转到微博扫码页面的url </span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">WeiBoLogin</span>(<span class="params">APIView</span>):</span></span><br><span class="line">	<span class="function"><span class="keyword">def</span> <span class="title">get</span>(<span class="params">self,request</span>):</span></span><br><span class="line">        Response(WEIBO_URL % (Weibo_App_Key, Weibo_REDIRECT_URL))</span><br></pre></td></tr></table></figure>
<h3 id="前端点击微博登录进行跳转"><a href="#前端点击微博登录进行跳转" class="headerlink" title="前端点击微博登录进行跳转"></a>前端点击微博登录进行跳转</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">//创建注册的这个页面</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">&quot;weibo_url&quot;</span>&gt;</span>微博<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      weibo_url: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      token:<span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;token&#x27;</span>)</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line"><span class="javascript">        axios.get(<span class="string">&#x27;http://127.0.0.1:8000/后端微博登录接口/&#x27;</span>).then(<span class="function"><span class="params">resp</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.weibo_url = resp.data</span></span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="授权通过获取access-token"><a href="#授权通过获取access-token" class="headerlink" title="授权通过获取access_token"></a>授权通过获取access_token</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> requests</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">WeiboView</span>(<span class="params">APIView</span>):</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">get</span>(<span class="params">self, request</span>):</span></span><br><span class="line">        code = request.GET.get(<span class="string">&#x27;code&#x27;</span>)</span><br><span class="line">        通过requests第三方库请求</span><br><span class="line">        r = requests.post(<span class="string">&quot;https://api.weibo.com/oauth2/access_token&quot;</span>, &#123;</span><br><span class="line">            <span class="comment"># 你的App Key</span></span><br><span class="line">            <span class="string">&quot;client_id&quot;</span>: Weibo_App_Key,</span><br><span class="line">            <span class="comment"># 你的App Secret</span></span><br><span class="line">            <span class="string">&quot;client_secret&quot;</span>: Weibo_App_SECRET,</span><br><span class="line">            <span class="comment"># 请求的类型</span></span><br><span class="line">            <span class="string">&quot;grant_type&quot;</span>: <span class="string">&quot;authorization_code&quot;</span>,</span><br><span class="line">            <span class="comment"># 通过回调获取的code</span></span><br><span class="line">            <span class="string">&quot;code&quot;</span>: code,</span><br><span class="line">            <span class="comment"># 再次进行回调</span></span><br><span class="line">            <span class="string">&quot;redirect_uri&quot;</span>: Weibo_REDIRECT_URL</span><br><span class="line">        &#125;)</span><br><span class="line">        access_token = r.json()[<span class="string">&#x27;access_token&#x27;</span>]</span><br><span class="line">        uid = r.json()[<span class="string">&#x27;uid&#x27;</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># 判断第三方表里有没有该用户，没有登录过则把账号添加到第三方表中，登陆过则返回登录信息</span></span><br><span class="line">        open_user = OpenUser.objects.<span class="built_in">filter</span>(uid=uid).first()</span><br><span class="line">        <span class="keyword">if</span> open_user:</span><br><span class="line">            <span class="comment"># 已经登录过了</span></span><br><span class="line">            user = open_user.user</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            user = User.objects.create(username=uid, password=uid)</span><br><span class="line">            <span class="comment"># 没有登录</span></span><br><span class="line">            OpenUser.objects.create(uid=uid, cate=<span class="string">&quot;微博&quot;</span>, user=user)</span><br><span class="line">        <span class="comment"># 生成令牌</span></span><br><span class="line">        token = jwt.encode(&#123;<span class="string">&quot;uid&quot;</span>:user.<span class="built_in">id</span>&#125;,<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="comment"># 跳转到前端首页</span></span><br><span class="line">        <span class="keyword">return</span> HttpResponse(<span class="string">&quot;</span></span><br><span class="line"><span class="string">            登录成功,点击跳转前端页面首页</span></span><br><span class="line"><span class="string">            &lt;a href=&#x27;http://127.0.0.1:8080/#/index?token=%s&amp;username=%s&#x27;&gt;跳转&lt;/a&gt;</span></span><br><span class="line"><span class="string">        &quot;</span>)</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/28/%E5%BE%AE%E5%8D%9A%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%BD%95/" data-id="cknublgc4001cv8uhdpu82rcd" data-title="微博第三方登录" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/%E5%85%B3%E4%BA%8E%E7%AC%AC%E4%B8%89%E6%96%B9/" rel="tag">关于第三方</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-vue父子组件" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/27/vue%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6/" class="article-date">
  <time class="dt-published" datetime="2021-01-27T07:38:46.534Z" itemprop="datePublished">2021-01-27</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/27/vue%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6/">vue父子组件</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><h4 id="什么是组件？"><a href="#什么是组件？" class="headerlink" title="什么是组件？"></a>什么是组件？</h4><p>组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。<br>在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。<br>在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。<br>所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象并提供相同的生命周期钩子。</p>
<hr>
<h4 id="父子组件"><a href="#父子组件" class="headerlink" title="父子组件"></a>父子组件</h4><p>在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，<br>子组件通过事件给父组件发送信息。</p>
<hr>
<h4 id="父组件向子组件传参"><a href="#父组件向子组件传参" class="headerlink" title="父组件向子组件传参"></a>父组件向子组件传参</h4><p>父组件向子组件传参一般我们需要传入动态参数来使用，所以要用v-bind来绑定，所传入的值要是整数、<br>对象、数组等。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//动态传入一个变量的值</span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">:v-bind</span>=<span class="string">&quot;user_list&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--&lt;span :绑定的固定值，也可以是通过请求后端拿到的数据列表=&quot;值的名字&quot;&gt;&lt;/span&gt;--&gt;</span></span><br></pre></td></tr></table></figure>
<p>当子组件进行接受父组件传入的值时，应该保证组件实例的作用域是独立存在的。<br>并且子组件要显式的用props选项声明它预期的数据。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 某个子组件中：</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">//通过props来接收父组件的值，并用列表保存，父组件传过来的值要与子组件名字一致</span></span><br><span class="line">  props: [<span class="string">&#x27;user_list&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="子组件向父组件传参"><a href="#子组件向父组件传参" class="headerlink" title="子组件向父组件传参"></a>子组件向父组件传参</h4><p>子组件通过$emit生成事件来向父组件来传递值，父组件可通过change的自定义事件来执行获取值message的方法。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;son&quot;</span>&gt;</span>点击传递值<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="comment">//定义子组件信息</span></span></span><br><span class="line"><span class="javascript">          message: <span class="string">&#x27;子组件消息&#x27;</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">//通过click方法来为父组件生成事件</span></span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">son</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">//change为传递给父组件的事件，message为传递过去的值</span></span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.$emit(<span class="string">&#x27;change&#x27;</span>, <span class="built_in">this</span>.message);</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;    </span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>父组件使用子组件的生成事件来获取子组件的值，并进行展示。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 父组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--        通过子组件传过来的事件change来触发父组件定义事件，拿到子组件传来的值--&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">test-com</span> @<span class="attr">change</span>=<span class="string">&quot;fu&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">test-com</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">br</span>/&gt;</span> </span><br><span class="line">        <span class="comment">&lt;!--展示子组件传来的值--&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>子组件传来的值 : &#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// ...</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">//定义message来接收子组件传来的值</span></span></span><br><span class="line"><span class="javascript">             fu_message: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line"><span class="javascript">       <span class="function"><span class="title">fu</span>(<span class="params">message</span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.fu_message = message;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/27/vue%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6/" data-id="cknublgby0010v8uh228aaloz" data-title="vue父子组件" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/vue/" rel="tag">vue</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-vue钩子函数" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/26/vue%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0/" class="article-date">
  <time class="dt-published" datetime="2021-01-25T16:00:00.000Z" itemprop="datePublished">2021-01-26</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/26/vue%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0/">vue钩子函数</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <hr>
<h3 id="vue的生命周期"><a href="#vue的生命周期" class="headerlink" title="vue的生命周期"></a>vue的生命周期</h3><p>vue的钩子函数是跟vue的生命周期有着密切关系的，而vue的1.0和2.0版本的变化也导致了vue钩子函数命名<br>有了很大的变化。</p>
<p><strong>根据提供的生命周期钩子说明Vue.js实例各个阶段的情况，Vue.js 2.0对不少钩子进行了修改，以下说明：</strong></p>
<table>
<thead>
<tr>
<th align="left">vue1.0</th>
<th align="left">vue2.0</th>
</tr>
</thead>
<tbody><tr>
<td align="left">init ： 在实例开始初始化时同步调用，此时数据观测、时间等都尚未初始化。</td>
<td align="left">2.0中更名为 <strong>beforeCreate</strong>。</td>
</tr>
<tr>
<td align="left"><strong>created</strong>：在实例创建之后调用，此时已经完成数据绑定、事件方法，但尚未开始 DOM 编译，即未挂载到 document 中。</td>
<td align="left">无新增特性</td>
</tr>
<tr>
<td align="left">无</td>
<td align="left"><strong>beforeMount</strong>：2.0 新增的生命周期钩子，在 mounted 之前运行。</td>
</tr>
<tr>
<td align="left">compiled：在编译结束时调用。此时所有指令已生效</td>
<td align="left">2.0 中更名为 <strong>mounted</strong></td>
</tr>
<tr>
<td align="left">无</td>
<td align="left"><strong>beforeUpdate</strong>：2.0 新增的生命周期钩子，在实例挂载会后，再次更新实例时会调用该方法。</td>
</tr>
<tr>
<td align="left">无</td>
<td align="left"><strong>updated</strong>：2.0新增的生命周期钩子，在实例挂载之后。</td>
</tr>
<tr>
<td align="left"><strong>beforeDestory</strong>： 在开始销毁实例时调用，此刻实例仍然有效。</td>
<td align="left">没有新增特性</td>
</tr>
<tr>
<td align="left"><strong>destoryed</strong>：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。</td>
<td align="left">没有新增特性</td>
</tr>
</tbody></table>
<h2 id="vue挂载的钩子函数"><a href="#vue挂载的钩子函数" class="headerlink" title="vue挂载的钩子函数"></a>vue挂载的钩子函数</h2><p> vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据<strong>创建</strong>、<strong>挂载</strong>、<strong>更新</strong>、<strong>销毁</strong>，<br> 这就是一个组件所谓的生命周期。在组件中常用的方法有:</p>
<h5 id="实例创建之前同步调用：beforeCreate"><a href="#实例创建之前同步调用：beforeCreate" class="headerlink" title="实例创建之前同步调用：beforeCreate"></a>实例创建之前同步调用：beforeCreate</h5><h5 id="实例创建之后调用：created"><a href="#实例创建之后调用：created" class="headerlink" title="实例创建之后调用：created"></a>实例创建之后调用：created</h5><h5 id="实例在挂载之前调用：beforeMount"><a href="#实例在挂载之前调用：beforeMount" class="headerlink" title="实例在挂载之前调用：beforeMount"></a>实例在挂载之前调用：beforeMount</h5><h5 id="实例在挂载之后调用：mounted"><a href="#实例在挂载之后调用：mounted" class="headerlink" title="实例在挂载之后调用：mounted"></a>实例在挂载之后调用：mounted</h5><h5 id="实例修改前嗲用：beforeUpdate"><a href="#实例修改前嗲用：beforeUpdate" class="headerlink" title="实例修改前嗲用：beforeUpdate"></a>实例修改前嗲用：beforeUpdate</h5><h5 id="实例修改后调用：updated"><a href="#实例修改后调用：updated" class="headerlink" title="实例修改后调用：updated"></a>实例修改后调用：updated</h5><h5 id="销毁实例时调用：beforeDestroy"><a href="#销毁实例时调用：beforeDestroy" class="headerlink" title="销毁实例时调用：beforeDestroy"></a>销毁实例时调用：beforeDestroy</h5><h5 id="实例销毁后调用：destroyed"><a href="#实例销毁后调用：destroyed" class="headerlink" title="实例销毁后调用：destroyed"></a>实例销毁后调用：destroyed</h5><hr>
<h2 id="vue路由守卫"><a href="#vue路由守卫" class="headerlink" title="vue路由守卫"></a>vue路由守卫</h2><h3 id="全局路由钩子"><a href="#全局路由钩子" class="headerlink" title="全局路由钩子"></a>全局路由钩子</h3><p><strong>router.beforeEach</strong>：全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;使用beforeEach必须调用next方法&#x27;</span>)</span><br><span class="line">  next()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>to: 将要进入的路由对象<br>from: 当前导航正要离开的路由<br>next: 进入管道中的下一个钩子。如果全部钩子执行完了，就表示当前next状态是确认状态</p>
<hr>
<p><strong>router.afterEach</strong>:全局后置守卫，在所有路由跳转结束的时候调用，这些钩子不会接受next函数也不会对导航本身进行变化</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">router.afterEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">//使用beforeEach必须调用next方法</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;无需调用next函数&#x27;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>to: 将要进入的路由对象<br>from: 当前导航正要离开的路由</p>
<h3 id="单个路由钩子"><a href="#单个路由钩子" class="headerlink" title="单个路由钩子"></a>单个路由钩子</h3><p><strong>beforeRouteEnter</strong>:用法与beforeEach类似，必须使用next方法调用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">components: &#123;</span><br><span class="line">    <span class="function"><span class="title">beforeRouteEnter</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;此时无法调用实例&quot;</span>);</span><br><span class="line">    next(<span class="function"><span class="params">sl</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">//因为当钩子执行前，组件实例还没被创建</span></span><br><span class="line">        <span class="comment">// sl 就是当前组件的实例相当于上面的 this，所以在next方法里你就可以把sl当this来用了。</span></span><br><span class="line">        <span class="built_in">console</span>.log(sl);<span class="comment">//当前组件的实例</span></span><br><span class="line">    &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>beforeRouteUpdate</strong>:在当前路由改变，并且该组件被复用时调用，next需要被主动调用，不能传回调。<br>对于一个带有动态参数的路径 /login/:id/，在/login/1/和/login/2/之间跳转的时候,这里只是传递的参数改变</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">beforeRouteUpdate</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;实例被复用&quot;</span>);</span><br><span class="line">    <span class="comment">//必须调用next</span></span><br><span class="line">    next();</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p><strong>beforeRouteLeave</strong>:导航离开该组件的对应路由时调用，next需要被主动调用，不能传回调。通常用来禁止用户未保存修改之前离开</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">beforeRouteLeave</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)</span>&#123;</span><br><span class="line">      user = <span class="built_in">window</span>.user</span><br><span class="line">      <span class="keyword">if</span>(user)&#123;</span><br><span class="line">        next()</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">else</span> &#123;</span><br><span class="line">        next(<span class="literal">false</span>)</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">//必须调用next</span></span><br><span class="line">      next()</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/26/vue%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0/" data-id="cknublgbz0012v8uhdb0eg7ku" data-title="vue钩子函数" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/vue/" rel="tag">vue</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-如何实现支付宝第三方支付" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/25/%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/" class="article-date">
  <time class="dt-published" datetime="2021-01-24T16:00:00.000Z" itemprop="datePublished">2021-01-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/25/%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/">vue拦截器</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="什么是vue拦截器？"><a href="#什么是vue拦截器？" class="headerlink" title="什么是vue拦截器？"></a>什么是vue拦截器？</h2><h3 id="在使用之前，先简单了解一下什么是vue的拦截器"><a href="#在使用之前，先简单了解一下什么是vue的拦截器" class="headerlink" title="在使用之前，先简单了解一下什么是vue的拦截器"></a>在使用之前，先简单了解一下什么是vue的拦截器</h3><p>vue拦截器分为<strong>请求拦截器</strong>和<strong>响应拦截器</strong>, 是为了统一处理http的请求与响应。<br>可以在一些请求或响应之前进行拦截并进行一些额外的操作。这样可以对request或response的数据更好的重复利用。<br>好处是可以有效节省代码的重复性，使其使用更加方便。</p>
<hr>
<p>如果没有安装axios请先安装axios</p>
<p>安装指令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install axios</span><br></pre></td></tr></table></figure>
<p>npm安装一般是使用国外的镜像下载，也可以使用国内镜像来下载，速度会更快，如果没有先下载</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
<p>使用国内镜像执行命令安装axios</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install axios</span><br></pre></td></tr></table></figure>
<p>然后在拦截器中导入axios</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br></pre></td></tr></table></figure>
<h2 id="vue拦截器的分类"><a href="#vue拦截器的分类" class="headerlink" title="vue拦截器的分类"></a>vue拦截器的分类</h2><h4 id="请求拦截器"><a href="#请求拦截器" class="headerlink" title="请求拦截器"></a>请求拦截器</h4><hr>
<p>例如：有多次需要传递的token令牌，可以通过请求拦截器来逐一配置，防止多次重写，提高代码的复用率。<br>请求拦截器多用于用户的一些登录操作，这时需要获取用户token来验证身份，保持认证，如果每次重复写token重复率会很高，<br>为了解决这种问题，vue提供了一种拦截器来逐一处理token。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 请求拦截器(在请求前会自动去做的操作)，如果登陆了，那么自动带token发送</span></span><br><span class="line">axios.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">//将token逐一封装在请求拦截器中</span></span><br><span class="line">        <span class="keyword">let</span> token = <span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;token&#x27;</span>);</span><br><span class="line">        <span class="comment">//判断token是否存在</span></span><br><span class="line">        <span class="keyword">if</span> (token) &#123;</span><br><span class="line">            config.headers.common[<span class="string">&#x27;Authorization&#x27;</span>] = <span class="string">&quot;JWT &quot;</span> + token <span class="comment">// 头部设置与token</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> config;      <span class="comment">//返回携带token正确的部分</span></span><br><span class="line">    &#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);   <span class="comment">//返回错误信息</span></span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="响应拦截器"><a href="#响应拦截器" class="headerlink" title="响应拦截器"></a>响应拦截器</h4><p>响应拦截器就是在你在响应时自动会做的操作，比如你没有进行登录身份认证，响应拦截器会自动将你的页面跳转到登录页面。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 响应拦截器，比如状态码返回为401时(身份认证不通过时)，要进入login界面</span></span><br><span class="line">axios.interceptors.response.use(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(response.code==<span class="number">200</span>)&#123;</span><br><span class="line">        <span class="comment">// 状态码返回200时，返回对象</span></span><br><span class="line">        <span class="keyword">return</span> response;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.$router.push(<span class="string">&#x27;/login&#x27;</span>)</span><br><span class="line">    <span class="keyword">return</span> response.errors;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h5 id="最后别忘了导出axios拦截器"><a href="#最后别忘了导出axios拦截器" class="headerlink" title="最后别忘了导出axios拦截器"></a>最后别忘了导出axios拦截器</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> axios</span><br></pre></td></tr></table></figure>





      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/25/%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%94%AF%E4%BB%98%E5%AE%9D%E7%AC%AC%E4%B8%89%E6%96%B9%E6%94%AF%E4%BB%98/" data-id="cknublgc3001av8uhdrysfjji" data-title="vue拦截器" class="article-share-link">Teilen</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog1/tags/vue/" rel="tag">vue</a></li></ul>

    </footer>
  </div>
  
</article>



  
    <article id="post-hello-world" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/blog1/2021/01/21/hello-world/" class="article-date">
  <time class="dt-published" datetime="2021-01-21T06:43:43.521Z" itemprop="datePublished">2021-01-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/blog1/2021/01/21/hello-world/">首页</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <p>欢迎来到我的首页！ hexo将记录博客文档在此网站。</p>
<h2 id="博客开始内容"><a href="#博客开始内容" class="headerlink" title="博客开始内容"></a>博客开始内容</h2><h3 id="创建的第一个博客"><a href="#创建的第一个博客" class="headerlink" title="创建的第一个博客"></a>创建的第一个博客</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://shangguan-lingfeng.gitee.io/blog1/2021/01/21/hello-world/" data-id="cknublgbn000lv8uh9waybjgo" data-title="首页" class="article-share-link">Teilen</a>
      
      
      
    </footer>
  </div>
  
</article>



  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/blog1/page/3/">&laquo; zurück</a><a class="page-number" href="/blog1/">1</a><a class="page-number" href="/blog1/page/2/">2</a><a class="page-number" href="/blog1/page/3/">3</a><span class="page-number current">4</span>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/CentOS/" rel="tag">CentOS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/Flask/" rel="tag">Flask</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/django/" rel="tag">django</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/docker/" rel="tag">docker</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/gitee/" rel="tag">gitee</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/linux/" rel="tag">linux</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/mysql/" rel="tag">mysql</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/python/" rel="tag">python</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/python%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" rel="tag">python基础知识</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/redis/" rel="tag">redis</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/vue/" rel="tag">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/webshell/" rel="tag">webshell</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/%E4%BA%91%E4%B8%BB%E6%9C%BA%E5%AE%9E%E7%8E%B0%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/" rel="tag">云主机实现视频直播</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog1/tags/%E5%85%B3%E4%BA%8E%E7%AC%AC%E4%B8%89%E6%96%B9/" rel="tag">关于第三方</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/blog1/tags/CentOS/" style="font-size: 17.5px;">CentOS</a> <a href="/blog1/tags/Flask/" style="font-size: 10px;">Flask</a> <a href="/blog1/tags/django/" style="font-size: 12.5px;">django</a> <a href="/blog1/tags/docker/" style="font-size: 12.5px;">docker</a> <a href="/blog1/tags/gitee/" style="font-size: 10px;">gitee</a> <a href="/blog1/tags/linux/" style="font-size: 10px;">linux</a> <a href="/blog1/tags/mysql/" style="font-size: 12.5px;">mysql</a> <a href="/blog1/tags/python/" style="font-size: 15px;">python</a> <a href="/blog1/tags/python%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" style="font-size: 17.5px;">python基础知识</a> <a href="/blog1/tags/redis/" style="font-size: 12.5px;">redis</a> <a href="/blog1/tags/vue/" style="font-size: 20px;">vue</a> <a href="/blog1/tags/webshell/" style="font-size: 10px;">webshell</a> <a href="/blog1/tags/%E4%BA%91%E4%B8%BB%E6%9C%BA%E5%AE%9E%E7%8E%B0%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/" style="font-size: 10px;">云主机实现视频直播</a> <a href="/blog1/tags/%E5%85%B3%E4%BA%8E%E7%AC%AC%E4%B8%89%E6%96%B9/" style="font-size: 12.5px;">关于第三方</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archiv</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog1/archives/2021/05/">五月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog1/archives/2021/04/">四月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog1/archives/2021/03/">三月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog1/archives/2021/02/">二月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog1/archives/2021/01/">一月 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">letzter Beitrag</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/blog1/2021/05/14/docker+CentOS+mysql%E5%AE%9E%E7%8E%B0%E4%B8%BB%E4%BB%8E%E5%90%8C%E6%AD%A5/">docker+CentOS+mysql实现主从同步</a>
          </li>
        
          <li>
            <a href="/blog1/2021/05/13/mysql%E5%AE%9E%E7%8E%B0%E8%AF%BB%E5%86%99%E5%88%86%E7%A6%BB(%E5%9C%A8%E4%B8%BB%E4%BB%8E%E5%90%8C%E6%AD%A5%E5%9F%BA%E7%A1%80%E4%B8%8A)/">mysql实现读写分离</a>
          </li>
        
          <li>
            <a href="/blog1/2021/05/12/%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/">在项目中自动生成接口文档</a>
          </li>
        
          <li>
            <a href="/blog1/2021/05/12/mysql%E5%AE%9E%E7%8E%B0%E4%B8%BB%E4%BB%8E%E5%90%8C%E6%AD%A5/">mysql实现主从同步</a>
          </li>
        
          <li>
            <a href="/blog1/2021/05/09/CentOS%E9%83%A8%E7%BD%B2flask%E9%A1%B9%E7%9B%AE/">nginx部署flask项目</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2021 Jerry<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/blog1/" class="mobile-nav-link">Home</a>
  
    <a href="/blog1/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/blog1/js/jquery-3.4.1.min.js"></script>



  
<script src="/blog1/fancybox/jquery.fancybox.min.js"></script>




<script src="/blog1/js/script.js"></script>





  </div>
</body>
</html>